<template>
  <el-card class="box-card">
    <div class="card-title">
      <span>{{ card_title }}</span>
    </div>
    <div class="card-content">
      <div id="main-charts" class="chart-view"></div>
    </div>
    </div>
  </el-card>
</template>
<style scoped>
.card-title {
  text-align: left;
  font-size: 20px;
  color: #676668;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* 让鼠标不能选中 */
  user-select: none;
}
.box-card {
  border-radius: 10px;
  height: 100%;
}
.chart-view {
    width: 100%;
    height: 310px;
}
</style>
<script>
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    props: {
        card_title: String
    },
    data() {
        return {
            chart: null,
            chart_datas: [{
                    name: "Actual",
                    type: "line",
                    symbol: 'circle',
                    lineStyle:{ 
                        normal:
                        {
                            width:2, 
                            color: "#2264e4"  
                        },
                    },
                    data: [92.0, 94.9, 97.0, 93.2, 95.6, 97.7, 100, 92.2, 92.6, 90.0, 96.4, 93.3],
                },{
                    name: "Budget",
                    type: "line",
                    symbol: 'circle',
                    lineStyle:{ 
                        normal:
                        {
                            width:2, 
                            color: "#37ff32"  
                        } 
                    },
                    data: [99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99, 99],
                },{
                    name: "Challenge",
                    type: "line",
                    symbol: 'circle',
                    lineStyle:{ 
                        normal:
                        {
                            width:2, 
                            color: "#fee14f"  
                        } 
                    },
                    data: [95, 95, 95, 95, 95, 95, 95.6, 95.2, 95.6, 95.0, 95.95, 95.3],
                }],
                min_value: 0,
            x_labels: [ "Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec" ]
            }
    },
    methods: {
        window_size_changed() {
            // console.log('resize');
            this.chart.resize();
        }
    },
    computed: {
        get_min_value() {
            var min_data = 100;
            this.chart_datas.forEach(element => {
                element.data.forEach(element => {
                    if (min_data > element) {
                        min_data = element;
                    }
                });
            });
            return min_data;
        }
    },
    mounted() {
        window.onresize = this.window_size_changed;
        let myChart = echarts.init(document.getElementById('main-charts'));
        this.chart = myChart;
        // console.log(myChart);
        myChart.setOption(
            {
                title: {
                    
                },
                tooltip: {
                    trigger: "axis"
                },
                xAxis: {
                    data:  this.x_labels,
                },
                yAxis: [
                {
                    type : 'value',
                    // axisLabel : {
                    //     formatter: '{value}'
                    // },
                    // splitNumber: 2,
                    min: this.get_min_value
                }
                    // min: 0
                ],
                legend:{
                    orient:'horizontal',
                    top:40,
                    right:10,
                    data: ['Actual', 'Budget', 'Challenge']
                },
                series: this.chart_datas
            }
        );
        // console.log(myChart);
    },
}
</script>